<!doctype html>
<!--[if lte IE 8]>     <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width" />
  <meta name="description" content="Cascading grid layout library" />

  <title>Masonry</title>

  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Noto+Sans:400,700,400italic" />

  
    <!-- DEV MODE - including each .css file -->
    
      <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" />
    
      <link rel="stylesheet" href="css/base.css" />
    
      <link rel="stylesheet" href="css/code.css" />
    
      <link rel="stylesheet" href="css/demos.css" />
    
      <link rel="stylesheet" href="css/footer.css" />
    
      <link rel="stylesheet" href="css/hero.css" />
    
      <link rel="stylesheet" href="css/icons.css" />
    
      <link rel="stylesheet" href="css/index.css" />
    
      <link rel="stylesheet" href="css/layout.css" />
    
      <link rel="stylesheet" href="css/modules.css" />
    
      <link rel="stylesheet" href="css/site-nav.css" />
    
  

  
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@desandro" />
  <meta name="twitter:url" content="http://masonry.desandro.com/index.html" />
  <meta name="twitter:title" content="Masonry" />
  <meta name="twitter:description" content="Cascading grid layout library" />

  

</head>
<body class="index-page" data-page="index">



  
  
    <div id="hero">
  <div class="primary-content">

    <div class="hero-masonry">
      <div class="grid-sizer"></div>

      <div class="hero-item has-title texty">
        <h1>Masonry</h1>
        <p class="tagline">Cascading grid layout library</p>
      </div>

      <div class="hero-item">
        <a class="button download-js" href="masonry.pkgd.min.js">
          <i class="icon icon-file-download"></i>
          Download masonry.&#8203;pkgd.&#8203;min.js
        </a>
      </div>

      
      

      <div class="hero-item">
        <a class="button github" href="https://github.com/desandro/masonry">
          <i class="icon icon-github"></i>
          Masonry on GitHub
        </a>
      </div>

      <div class="hero-item w2 what-is texty">
        <h2>What is Masonry?</h2>
        <p>Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You&rsquo;ve probably seen it in use all over the Internet.</p>
      </div>

    </div> 

    <div>
      <button id="load-more-examples" class="button">Load more examples</button>
    </div>

  </div> 

</div> 

  

  <div id="content">



    
    
<div class="primary-content">

<h2 id="install">Install</h2>

<p>A packaged source file includes everything you need to use Masonry.</p>

<ul>
  <li>
    <a href="masonry.pkgd.min.js">masonry.pkgd.min.js</a> for production
  </li>
  <li>
    <a href="masonry.pkgd.js">masonry.pkgd.js</a> for development
  </li>
</ul>

<h3 id="bower">Bower</h3>

<p>If you are familiar with the command line and build processes, Masonry can be installed with <a href="http://twitter.github.com/bower">Bower</a>. Masonry is built on dependencies. Bower takes care of these.</p>

<pre><code>bower install masonry</code></pre>


</div><div class="primary-content">

<h2 id="getting-started">Getting started</h2>

<h3 id="html">HTML</h3>

<p>Masonry works on a container element with a group of similar child items.</p>

<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"container"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"item"</span>&gt;</span>...<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"item w2"</span>&gt;</span>...<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"item"</span>&gt;</span>...<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  ...
<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></pre>


<p>Include the Masonry script in your site.</p>

<pre><code class="html"><span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"/path/to/masonry.pkgd.min.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></pre>


<h3 id="css">CSS</h3>

<p>All sizing of items is handled by your CSS.</p>

<pre><code class="css"><span class="class">.item</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">25</span>%;</span></span> <span class="rule">}</span></span>
<span class="class">.item</span><span class="class">.w2</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">50</span>%;</span></span> <span class="rule">}</span></span></code></pre>


<h3 id="javascript">Initialize with JavaScript</h3>

<p>Initialize a Masonry instance with <code><span class="keyword">new</span> Masonry( element, options )</code>. The <code>Masonry</code> constructor accepts two arguments: the container element and an <a href="options.html">options</a> object.</p>

<pre><code class="js"><span class="keyword">var</span> container = document.querySelector(<span class="string">'#container'</span>);
<span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( container, {
  <span class="comment">// options</span>
  columnWidth: <span class="number">200</span>,
  itemSelector: <span class="string">'.item'</span>
});</code></pre>


<h3 id="init-with-html">Initialize in HTML</h3>

<p>You can initialize Masonry in HTML, without writing any JavaScript. Simply add <code>js-masonry</code> to the class of the container element. <a href="options.html">Options</a> can be set with a <code>data-masonry-options</code> attribute.</p>

<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"container"</span> <span class="attribute">class</span>=<span class="value">"js-masonry"</span>
  <span class="attribute">data-masonry-options</span>=<span class="value">'{ "columnWidth": 200, "itemSelector": ".item" }'</span>&gt;</span></code></pre>


<p><strong>Options set in HTML must be valid JSON.</strong> Keys need to be quoted, for example <code><span class="string">"itemSelector"</span>:</code>. Note that the attribute value uses single quotes <code>'</code>, but the JSON entities use double-quotes <code>"</code>.</p>

<p>That&rsquo;s it! Now let&rsquo;s do some fun stuff with <a href="options.html">options</a> and <a href="methods.html">methods</a>.</p>

</div><div class="primary-content">

<h2 id="jquery">jQuery</h2>

<p>jQuery is <strong>not</strong> required to use Masonry. But if you do enjoy jQuery, Masonry works with it as a jQuery plugin.</p>

<pre><code class="js"><span class="keyword">var</span> $container = $(<span class="string">'#container'</span>);
<span class="comment">// initialize</span>
$container.masonry({
  columnWidth: <span class="number">200</span>,
  itemSelector: <span class="string">'.item'</span>
});</code></pre>


<p>Get the Masonry instance with <code>.data(<span class="string">'masonry'</span>)</code>.</p>

<pre><code class="js"><span class="keyword">var</span> msnry = $container.data(<span class="string">'masonry'</span>);</code></pre>


</div><div class="primary-content">

<h2 id="mit-license">MIT License</h2>

<p>Masonry is released under the <a href="http://desandro.mit-license.org/">MIT License</a>. Have at it.</p>

</div>

<div id="notification"></div>


  </div>

  <div id="footer">
    <div class="primary-content">
      Masonry by <a href="http://desandro.com">David DeSandro</a>. Make something rad with it.
    </div>
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/jquery.min.js"><\/script>')</script>


  <!-- DEV MODE - including each .js file -->
  
    <script src="bower_components/classie/classie.js"></script>
  
    <script src="bower_components/eventie/eventie.js"></script>
  
    <script src="bower_components/doc-ready/doc-ready.js"></script>
  
    <script src="bower_components/get-style-property/get-style-property.js"></script>
  
    <script src="bower_components/eventEmitter/EventEmitter.js"></script>
  
    <script src="bower_components/imagesloaded/imagesloaded.js"></script>
  
    <script src="bower_components/get-size/get-size.js"></script>
  
    <script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
  
    <script src="bower_components/matches-selector/matches-selector.js"></script>
  
    <script src="bower_components/outlayer/item.js"></script>
  
    <script src="bower_components/outlayer/outlayer.js"></script>
  
    <script src="bower_components/masonry/masonry.js"></script>
  
    <script src="js/controller.js"></script>
  
    <script src="js/pages/events.js"></script>
  
    <script src="js/pages/faq.js"></script>
  
    <script src="js/pages/index.js"></script>
  
    <script src="js/pages/methods.js"></script>
  




</body>
</html>
